<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-09-09 10:42:23
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-10-10 17:29:33
-->
<template>
  <div class="draw">
    <Draw />
    <Measure />
    <!-- 操作面板 -->
    <keep-alive>
      <transition name="el-fade-in">
        <component v-if="selected && targets.includes(selected.type)" :is="selected.type"></component>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
  import { mapState } from "vuex";
import Draw from "./draw.vue";
import Measure from "./measure.vue";

import Flypath from "./control/Flypath.vue";
import CameraTour from "./control/CameraTour.vue";
import Bim from "./control/Bim.vue"
export default {
  computed: {
    ...mapState("layer", ["selected"])
  },
  components: {
    Draw,
    Measure,
    flyPath: Flypath,
    cameraTour: CameraTour,
    bim: Bim
  },
  data() {
    return {
      target: null,
      targets: ["flyPath", "cameraTour", "bim"]
    }
  }
};
</script>

<style lang="scss" scoped>
.draw {
  z-index: 95;
  display: flex;
  position: fixed;
  left: 20px;
  bottom: 20px;
}
</style>


<style lang="scss">
  @import "@/assets/styles/index.scss";
  .tool {
    display: flex;
    padding: 8px 5px;
    border-radius: 6px;
    // background: #2a2b2ee7;
    @include background_color("panel-background-color");
  
    .item {
      width: 30px;
      height: 30px;
      padding: 5px;
      margin: 0 2px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      transition: 0.3s;
  
      &:hover {
        cursor: pointer;
        background: #3e4044;
    @include background_color("hover-color");
      }
  
      &.active {
        color: #2a2b2e;
        background: #8ab4f8;
      }
  
      i {
        font-size: 18px;
        @include font_color("label-color");
      }
    }
  }
  </style>